import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Dimensions } from 'react-native';
import { Button, WhiteSpace, WingBlank, Flex, List, Alert, Carousel } from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import { getProductEditInfoApi } from '~/api/product';
import HTML from 'react-native-render-html';

const width = Dimensions.get('window').width;
export default class GiftInfo extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: '',
            headerLeft: (
                <Flex
                    onPress={() => {
                        navigation.goBack();
                    }}
                    style={{ marginLeft: 10 }}>
                    <Image style={{ width: 27, height: 27 }} source={require('~/assets/public/liback.png')} />
                </Flex>
            ),
            headerRight: (
                <Flex style={{ marginRight: 10 }}>
                    <Image style={{ width: 27, height: 27 }} source={require('~/assets/public/lifenxiang.png')} />
                </Flex>
            ),
            headerTransparent: true,
        };
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            id: this.props.navigation.getParam('params'),
            list: [],
            money: 500,
            headname: '',
            htmls: '',
            httphead: '',
            imglist: [],
        };
        getProductEditInfoApi({ id: this.state.id }).then((r) => {
            if (r.code === 0) {
                let info = r.data.sp_head;
                let url_b = r.data.http_head.replace('/product', '/');
                let html_new = r.data.sp_html.replace(/width="\d+"/gi, '').replace(/height="\d+"/gi, '');
                html_new = html_new.replace(/style="[^"]+"/gi, '').replace(/{base_url}/g, url_b);
                // console.log(html_new);
                let picList_n = [];
                r.data.sp_showpic_list.forEach((f) => {
                    if (f.indexOf('uploads') != 0) {
                        f = r.data.http_head + '/' + this.state.id + '/2/' + f;
                    } else {
                        f = url_b + f;
                    }
                    picList_n.push(f);
                });
                this.setState({
                    list: r.data.sp_head,
                    htmls: html_new,
                    headname: r.data.sp_head.name,
                    imglist: picList_n,
                    httphead: r.data.http_head,
                });
            } else {
                Alert.alert(r.msg);
            }
        });
        console.disableYellowBox = true;
    }

    render() {
        return (
            <ScrollView style={{ flex: 1 }}>
                <Carousel style={{ width: '100%', height: 350 }} autoplay={true} infinite={true} dots={true}>
                    {this.state.imglist.length > 0 &&
                        this.state.imglist.map((item, index) => {
                            return (
                                <View>
                                    <Image style={{ width: '100%', aspectRatio: 1 / 1 }} source={{ uri: item }} />
                                </View>
                            );
                        })}
                </Carousel>
                <View style={{ width: '100%', backgroundColor: 'white' }}>
                    <Flex justify={'between'} style={{ width: '100%', paddingTop: 17, paddingLeft: 10, paddingRight: 10 }}>
                        <Text style={{ color: '#FF0700', fontSize: 12 }}>
                            ￥<Text style={{ fontSize: 18, fontWeight: '800' }}>{this.state.list.price_market}</Text>
                        </Text>
                        <Image style={{ width: 18.5, height: 18.5 }} source={require('~/assets/public/xin.png')} />
                    </Flex>
                    <Text numberOfLines={2} style={{ marginTop: 17, paddingLeft: 10, paddingRight: 10, color: '#393C46', fontSize: 13 }}>
                        {this.state.headname}
                    </Text>
                </View>
                <Flex style={{ width: '100%' }}>
                    {this.state.htmls != '' && (<HTML html={this.state.htmls}  tagsStyles={{width: '100%'}} imagesMaxWidth={width}/>)}
                </Flex>
            </ScrollView>
        );
    }
}

const renderer = {
    img: (htmlAttribs, children, convertedCSSStyles, passProps) => {
        let heights;
        Image.getSize(htmlAttribs.src,(width,height)=> {
            heights= height;
            console.log(heights);
        })
        console.log(heights)
        return (
                <Image style={{ width: '100%', height: heights }} source={{ uri: htmlAttribs.src }} />
        );
    }
};
const styles = StyleSheet.create({});
